<template>
    <a-card title="登录" style="width: 500px; margin: auto">
        <a-form-model
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            v-bind="layout"
        >
            <a-form-model-item has-feedback label="用户名" prop="username">
                <a-input v-model="ruleForm.username" />
            </a-form-model-item>
            <a-form-model-item has-feedback label="密码" prop="pwd">
                <a-input
                    v-model="ruleForm.pwd"
                    type="password"
                    autocomplete="off"
                />
            </a-form-model-item>
            <a-form-model-item has-feedback label="确认密码" prop="confirmPwd">
                <a-input
                    v-model="ruleForm.confirmPwd"
                    type="password"
                    autocomplete="off"
                />
            </a-form-model-item>
            <a-form-model-item has-feedback label="选择日期" prop="createDate">
               <a-date-picker v-model="ruleForm.createDate" valueFormat="YYYY-MM-DD" />
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                <a-button type="primary" @click="submitForm('ruleForm')">
                    Submit
                </a-button>
                <a-button
                    style="margin-left: 10px"
                    @click="resetForm('ruleForm')"
                >
                    Reset
                </a-button>
            </a-form-model-item>
        </a-form-model>
    </a-card>
</template>

<script>
import { login } from "../services/user";
export default {
    data() {
        const checkPwd = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("Please input the password again"));
            } else if (value !== this.ruleForm.pwd) {
                callback(new Error("Two inputs don't match!"));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                username: "",
                pwd: "",
                confirmPwd: "",
                createDate: "2022-06-05"
            },
            layout: {
                labelCol: { span: 4 },
                wrapperCol: { span: 14 },
            },
            rules: {
                username: [
                    {
                        pattern: /^\w{6,20}$/,
                        message: "用户必须6-20位字母或数字",
                    },
                ],
                pwd: [
                    { required: true },
                    {
                        pattern: /^.{6,20}$/,
                        message: "密码必须6-20位字母或数字",
                    },
                ],
                confirmPwd: [{ validator: checkPwd, trigger: "blur" }],
            },
        };
    },
    methods: {
        async login() {
            let data = await login(this.username, this.pwd);
            console.log(data);
        },
        submitForm() {
            this.$refs["ruleForm"].validate(async (valid) => {
                if (valid) {
                    console.log(this.ruleForm.createDate);
                    let data = await login(this.ruleForm.username, this.ruleForm.pwd);
                    if(Object.keys(data).length){
                         
                        sessionStorage.setItem("token",data.token);
                        alert("登录成功");
                    }else{
                        alert("登录失败");
                    }
                    
                    
                } else {
                    alert("fail");
                }
            });
        },
    },
};
</script>

<style scoped>
</style>